<template>
  <el-container class="employee-container">
    <!-- 左侧导航 -->
    <el-aside width="200px" class="sidebar">
      <el-menu
          :default-active="activeTab"
          @select="handleMenuSelect"
      >
        <el-menu-item index="1">工作信息</el-menu-item>
        <el-menu-item index="2">个人信息</el-menu-item>
        <el-menu-item index="3">教育经历</el-menu-item>
        <el-menu-item index="4">工作经历</el-menu-item>
        <el-menu-item index="5">合同信息</el-menu-item>
        <el-menu-item index="6">薪资档案</el-menu-item>
        <el-menu-item index="7">附件存档</el-menu-item>
        <el-menu-item index="8">成长记录</el-menu-item>
        <el-menu-item index="9">操作记录</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容 -->
    <el-container>
      <el-header class="header">
        <el-button type="primary" @click="handlePersonnelAdjustment">人事调动</el-button>
        <el-button type="success" @click="exportData">导出</el-button>
        <el-button type="default" @click="moreActions">更多操作</el-button>
      </el-header>

      <el-main class="main-content">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-mask">
          <el-loading-spinner size="large"></el-loading-spinner>
          <p>正在加载员工数据...</p>
        </div>

        <!-- 错误提示 -->
        <div v-else-if="error" class="error-message">
          <el-alert title="加载失败" type="error" :description="error" show-icon></el-alert>
        </div>

        <!-- 员工信息卡片 (固定显示) -->
        <el-card class="employee-card" v-else>
          <div slot="header" class="card-header">
            <span>员工详情</span>
            <el-button type="text" @click="goBack">返回</el-button>
          </div>
          <div class="employee-profile">
            <img :src="employee.avatar" alt="员工头像" class="avatar">
            <div class="employee-info">
              <h3>{{ employee.name }}</h3>
              <p style="display: flex;white-space: nowrap"><dict-tag :options="employee_status" :value="employee.status" /> | 全职 | {{ employee.companyName }} | {{ employee.deptName }} | {{ employee.positionName }}</p>
              <p>电话: {{ employee.phone }}</p>
              <p>邮箱: {{ employee.email }}</p>
            </div>
          </div>
        </el-card>

        <!-- 工作信息卡片 -->
        <el-card class="info-card" v-if="activeTab === '1' && employee">
          <div slot="header" class="card-header">
            <span>工作信息</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <el-form label-position="left" label-width="100px" class="two-column-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名">
                  <span>{{ employee.name }}</span>
                </el-form-item>
                <el-form-item label="工号">
                  <span>{{ employee.employeeNumber || '-' }}</span>
                </el-form-item>
                <el-form-item label="部门组织">
                  <span v-if="employee.companyName">
                    {{ employee.companyName }}
                    <span v-if="employee.companyName && employee.deptName">/</span>
                    {{ employee.deptName }}
                  </span>
                </el-form-item>
                <el-form-item label="上级负责人">
                  <span>{{ employee.leader || '-' }}</span>
                </el-form-item>
                <el-form-item label="职位">
                  <span>{{ employee.positionName || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职级">
                  <span>{{ employee.level || '-' }}</span>
                </el-form-item>
                <el-form-item label="手机号">
                  <span>{{ employee.phone || '-' }}</span>
                </el-form-item>
                <el-form-item label="工作地点">
                  <span>{{ employee.workplace || employee.companyName || '-' }}</span>
                </el-form-item>
                <el-form-item label="工作城市">
                  <span>{{ employee.city || '-' }}</span>
                </el-form-item>
                <el-form-item label="员工类型">
                  <span>{{employee.type}}</span>
                </el-form-item>
                <el-form-item label="工时制度">
                  <span>标准工作制</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 工作状态卡片 -->
        <el-card class="info-card" v-if="activeTab === '1' && employee">
          <div slot="header" class="card-header">
            <span>工作状态</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <el-form label-position="left" label-width="100px" class="two-column-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="员工状态">
                  <span><dict-tag :options="employee_status" :value="employee.status" /></span>
                </el-form-item>
                <el-form-item label="司龄">
                  <span>{{ calculateTenure(employee.hireDate) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入职日期">
                  <span>{{ employee.hireDate || '-' }}</span>
                </el-form-item>
                <el-form-item label="启用状态">
                  <el-switch
                      v-model="employee.delFlag"
                      :active-value="'0'"
                      :inactive-value="'1'"
                      active-text="启用"
                      inactive-text="禁用"
                      @change="handleStatusChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 个人信息卡片 -->
        <el-card class="info-card" v-if="activeTab === '2' && employee">
          <div slot="header" class="card-header">
            <span>个人信息</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <el-form label-position="left" label-width="100px" class="two-column-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="性别">
                  <span>{{ employee.gender || '-' }}</span>
                </el-form-item>
                <el-form-item label="出生日期">
                  <span>{{ employee.birthday || '-' }}</span>
                </el-form-item>
                <el-form-item label="学历">
                  <span><dict-tag :options="employee_education" :value="employee.degree" /></span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证件类型">
                  <span>{{ employee.idType || '身份证' }}</span>
                </el-form-item>
                <el-form-item label="证件号码">
                  <span>{{ employee.idNumber || '-' }}</span>
                </el-form-item>
                <el-form-item label="邮箱">
                  <span>{{ employee.email || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 教育经历卡片 (使用表单而非表格) -->
        <el-card class="info-card" v-if="activeTab === '3' && employee">
          <div slot="header" class="card-header">
            <span>教育经历</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <el-form label-position="left" label-width="120px" class="two-column-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="学历">
                  <span><dict-tag :options="employee_education" :value="employee.degree" /></span>
                </el-form-item>
                <el-form-item label="毕业院校">
                  <span>{{ employee.school || '-' }}</span>
                </el-form-item>
                <el-form-item label="入学时间">
                  <span>{{ employee.startDate || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业">
                  <span>{{ employee.major || '-' }}</span>
                </el-form-item>
                <el-form-item label="毕业时间">
                  <span>{{ employee.endDate || '-' }}</span>
                </el-form-item>
                <el-form-item label="类型">
                  <span><dict-tag :options="education_type" :value="employee.educationType" /></span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 工作经历卡片 (使用表单而非表格) -->
        <el-card class="info-card" v-if="activeTab === '4' && employee">
          <div slot="header" class="card-header">
            <span>工作经历</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <el-form label-position="left" label-width="120px" class="two-column-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="当前公司">
                  <span>{{ employee.currentCompany || '-' }}</span>
                </el-form-item>
                <el-form-item label="当前职位">
                  <span>{{ employee.currentPosition || '-' }}</span>
                </el-form-item>
                <el-form-item label="入职时间">
                  <span>{{ employee.currentJobStartDate || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="上一家公司">
                  <span>{{ employee.lastCompany || '-' }}</span>
                </el-form-item>
                <el-form-item label="上一职位">
                  <span>{{ employee.lastPosition || '-' }}</span>
                </el-form-item>
                <el-form-item label="离职时间">
                  <span>{{ employee.lastJobEndDate || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 合同信息卡片 (使用表单而非表格) -->
        <el-card class="info-card" v-if="activeTab === '5' && employee">
          <div slot="header" class="card-header">
            <span>合同信息</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <el-form label-position="left" label-width="120px" class="two-column-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="合同类型">
                  <span>{{ employee.contractType || '-' }}</span>
                </el-form-item>
                <el-form-item label="合同编号">
                  <span>{{ employee.contractNumber || '-' }}</span>
                </el-form-item>
                <el-form-item label="开始日期">
                  <span>{{ employee.contractStartDate || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束日期">
                  <span>{{ employee.contractEndDate || '-' }}</span>
                </el-form-item>
                <el-form-item label="薪资">
                  <span>{{ employee.contractSalary || '-' }}</span>
                </el-form-item>
                <el-form-item label="状态">
                  <span>{{ employee.contractStatus || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 薪资档案卡片 (使用表单而非表格) -->
        <el-card class="info-card" v-if="activeTab === '6' && employee">
          <div slot="header" class="card-header">
            <span>薪资档案</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <el-form label-position="left" label-width="120px" class="two-column-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="基本工资">
                  <span>{{ employee.baseSalary || '-' }}</span>
                </el-form-item>
                <el-form-item label="绩效工资">
                  <span>{{ employee.performanceSalary || '-' }}</span>
                </el-form-item>
                <el-form-item label="奖金">
                  <span>{{ employee.bonus || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="补贴">
                  <span>{{ employee.allowance || '-' }}</span>
                </el-form-item>
                <el-form-item label="社保基数">
                  <span>{{ employee.socialSecurityBase || '-' }}</span>
                </el-form-item>
                <el-form-item label="公积金基数">
                  <span>{{ employee.housingFundBase || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 附件存档卡片 -->
        <el-card class="info-card" v-if="activeTab === '7' && employee">
          <div slot="header" class="card-header">
            <span>附件存档</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <el-form label-position="left" label-width="120px" class="two-column-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证">
                  <el-link :href="employee.idCardFileUrl || '#'" target="_blank" v-if="employee.idCardFileUrl">查看</el-link>
                  <span v-else>-</span>
                </el-form-item>
                <el-form-item label="学历证书">
                  <el-link :href="employee.degreeFileUrl || '#'" target="_blank" v-if="employee.degreeFileUrl">查看</el-link>
                  <span v-else>-</span>
                </el-form-item>
                <el-form-item label="劳动合同">
                  <el-link :href="employee.contractFileUrl || '#'" target="_blank" v-if="employee.contractFileUrl">查看</el-link>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="体检报告">
                  <el-link :href="employee.medicalReportUrl || '#'" target="_blank" v-if="employee.medicalReportUrl">查看</el-link>
                  <span v-else>-</span>
                </el-form-item>
                <el-form-item label="其他文件">
                  <el-link :href="employee.otherFileUrl || '#'" target="_blank" v-if="employee.otherFileUrl">查看</el-link>
                  <span v-else>-</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 成长记录卡片 (使用表单而非表格) -->
        <el-card class="info-card" v-if="activeTab === '8' && employee">
          <div slot="header" class="card-header">
            <span>成长记录</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <el-form label-position="left" label-width="120px" class="two-column-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="最近晋升">
                  <span>{{ employee.lastPromotion || '-' }}</span>
                </el-form-item>
                <el-form-item label="晋升时间">
                  <span>{{ employee.promotionDate || '-' }}</span>
                </el-form-item>
                <el-form-item label="最近培训">
                  <span>{{ employee.lastTraining || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="培训时间">
                  <span>{{ employee.trainingDate || '-' }}</span>
                </el-form-item>
                <el-form-item label="绩效评级">
                  <span>{{ employee.performanceRating || '-' }}</span>
                </el-form-item>
                <el-form-item label="技能证书">
                  <span>{{ employee.certifications || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 操作记录卡片 (使用表单而非表格) -->
        <el-card class="info-card" v-if="activeTab === '9' && employee">
          <div slot="header" class="card-header">
            <span>操作记录</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <el-form label-position="left" label-width="120px" class="two-column-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="创建时间">
                  <span>{{ employee.createTime || '-' }}</span>
                </el-form-item>
                <el-form-item label="创建人">
                  <span>{{ employee.creator || '-' }}</span>
                </el-form-item>
                <el-form-item label="最近修改时间">
                  <span>{{ employee.lastUpdateTime || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="修改人">
                  <span>{{ employee.lastUpdater || '-' }}</span>
                </el-form-item>
                <el-form-item label="最近操作">
                  <span>{{ employee.lastOperation || '-' }}</span>
                </el-form-item>
                <el-form-item label="备注">
                  <span>{{ employee.operationRemark || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 未定义内容 -->
        <el-card class="info-card" v-else>
          <div slot="header" class="card-header">
<!--            <span>{{ tabTitles[activeTab] || '未定义内容' }}</span>-->
            <span>其他信息</span>
            <el-button type="text" @click="editInfo">编辑</el-button>
          </div>
          <div class="empty-content">
            <el-empty description="该模块内容正在建设中..."></el-empty>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getExperience } from "@/api/employee/employeeDetails/employeeDetails";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const { employee_status, employee_type, is_enabled, employee_education, education_type } = proxy.useDict(
    "employee_status",
    "employee_type",
    "is_enabled",
    "employee_education",
    "education_type"
);

// 获取路由和导航对象
const route = useRoute();
const router = useRouter();

// 状态管理
const loading = ref(true);
const error = ref('');
const employeeId = ref(null);
const employee = ref({
  // 默认数据（在加载完成前显示）
  name: '加载中...',
  avatar: 'https://picsum.photos/100/100?random=1',
  companyName: '',
  deptName: '',
  positionName: '',
  phone: '',
  email: '',
  status: '',
  delFlag: '0',

  // 教育经历相关字段
  highestDegree: '',
  graduateSchool: '',
  major: '',
  enrollDate: '',
  graduationDate: '',
  degree: '',

  // 工作经历相关字段
  currentCompany: '',
  currentPosition: '',
  currentJobStartDate: '',
  lastCompany: '',
  lastPosition: '',
  lastJobEndDate: '',

  // 合同信息相关字段
  contractType: '',
  contractNumber: '',
  contractStartDate: '',
  contractEndDate: '',
  contractSalary: '',
  contractStatus: '',

  // 薪资档案相关字段
  baseSalary: '',
  performanceSalary: '',
  bonus: '',
  allowance: '',
  socialSecurityBase: '',
  housingFundBase: '',

  // 附件存档相关字段
  idCardFileUrl: '',
  degreeFileUrl: '',
  contractFileUrl: '',
  medicalReportUrl: '',
  otherFileUrl: '',

  // 成长记录相关字段
  lastPromotion: '',
  promotionDate: '',
  lastTraining: '',
  trainingDate: '',
  performanceRating: '',
  certifications: '',

  // 操作记录相关字段
  createTime: '',
  creator: '',
  lastUpdateTime: '',
  lastUpdater: '',
  lastOperation: '',
  operationRemark: ''
});

// 初始化数据
onMounted(() => {
  // 从路由参数获取员工ID
  const paramId = route.params.employeeId;
  console.log('路由参数:', route.params);

  // 验证参数有效性
  if (!paramId) {
    error.value = '未获取到员工ID';
    loading.value = false;
    return;
  }

  // 转换为数值类型
  const numericId = parseInt(paramId, 10);
  if (isNaN(numericId)) {
    error.value = `无效的员工ID: ${paramId}，请返回列表页重新选择`;
    loading.value = false;
    return;
  }

  employeeId.value = numericId;
  console.log('转换后的员工ID:', employeeId.value);

  // 调用接口获取员工数据
  getExperience(employeeId.value)
      .then(response => {
        console.log('接口返回数据:', response);
        // 根据实际接口返回结构调整
        if (response.code === 200 && response.data) {
          employee.value = response.data;

          // 解析身份证号获取性别和出生日期
          if (employee.value.idNumber) {
            parseIdNumber(employee.value.idNumber);
          }
        } else {
          error.value = response.message || '获取员工数据失败';
        }
      })
      .catch(err => {
        console.error('接口调用失败:', err);
        error.value = '加载员工数据失败，请稍后重试';
      })
      .finally(() => {
        loading.value = false;
      });
});

// 当前激活的标签页
const activeTab = ref('1');

// 标签页标题映射
const tabTitles = {
  '1': '工作信息',
  '2': '个人信息',
  '3': '教育经历',
  '4': '工作经历',
  '5': '合同信息',
  '6': '薪资档案',
  '7': '附件存档',
  '8': '成长记录',
  '9': '操作记录'
};

// 处理菜单选择
const handleMenuSelect = (key) => {
  activeTab.value = key;
  console.log(`选中标签: ${tabTitles[key] || key}`);
};

// 操作方法
const handlePersonnelAdjustment = () => {
  console.log('人事调动');
  ElMessage.info('人事调动功能开发中');
};

const exportData = () => {
  console.log('导出数据');
  ElMessage.info('导出功能开发中');
};

const moreActions = () => {
  console.log('更多操作');
  ElMessage.info('更多操作功能开发中');
};

const goBack = () => {
  router.back(); // 使用 router.back() 返回上一页
};

const editInfo = () => {
  ElMessage.info('编辑功能开发中');
};

// 处理状态变更
/*const handleStatusChange = (newValue) => {
  const statusText = newValue === '0' ? '启用' : '禁用';
  ElMessage.confirm(`确定要${statusText}该员工吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 模拟状态变更逻辑
    employee.value.delFlag = newValue;
    ElMessage.success(`${statusText}成功`);
    // 实际项目中应调用API更新状态
    // updateStatus(employeeId.value, newValue).then(...);
  }).catch(() => {
    // 取消操作，回滚状态
    employee.value.delFlag = newValue === '0' ? '1' : '0';
  });
};*/

// 下载文件
const downloadFile = (fileUrl) => {
  if (fileUrl) {
    window.open(fileUrl, '_blank');
  } else {
    ElMessage.warning('文件不存在');
  }
};

// 解析身份证号获取性别和出生日期
const parseIdNumber = (idNumber) => {
  if (idNumber && idNumber.length === 18) {
    // 解析出生日期
    const birthday = idNumber.substring(6, 14);
    employee.value.birthday = `${birthday.substring(0, 4)}-${birthday.substring(4, 6)}-${birthday.substring(6, 8)}`;
    // 解析性别
    const genderCode = parseInt(idNumber.charAt(16), 10);
    employee.value.gender = genderCode % 2 === 0 ? '女' : '男';
  } else {
    // 如果身份证号不完整或格式错误，清空性别和出生日期
    employee.value.birthday = '';
    employee.value.gender = '';
  }
};

// 计算司龄
const calculateTenure = (hireDate) => {
  if (!hireDate) return '';

  const startDate = new Date(hireDate);
  const endDate = new Date();
  const diff = endDate - startDate;

  const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
  const months = Math.floor((diff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24 * 30));
  const days = Math.floor((diff % (1000 * 60 * 60 * 24 * 30)) / (1000 * 60 * 60 * 24));

  let result = '';
  if (years > 0) result += `${years}年`;
  if (months > 0) result += `${months}月`;
  if (days > 0) result += `${days}日`;

  return result || '不足1天';
};
</script>

<style scoped>
/* 全局容器 */
.employee-container {
  height: 100vh;
  font-family: 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 左侧边栏 */
.sidebar {
  background-color: #f8f9fa;
  border-right: 1px solid #ebeef5;
}

/* 顶部操作栏 */
.header {
  background-color: #fff;
  padding: 10px 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

/* 主内容区域 */
.main-content {
  padding: 20px;
  background-color: #f5f7fa;
  position: relative;
}

/* 加载遮罩 */
.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

/* 卡片通用样式 */
.employee-card, .info-card {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

/* 员工信息区域 - 居中显示 */
.employee-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 20px;
  object-fit: cover;
  border: 2px solid #409eff;
}

.employee-info {
  width: 100%;
  max-width: 600px;
}

.employee-info h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.employee-info p {
  margin-bottom: 8px;
  color: #606266;
  font-size: 16px;
}

.employee-info p:first-of-type {
  justify-content: center;
  margin-bottom: 15px;
}

/* 工作信息两列布局 */
.two-column-form {
  padding: 20px;
}

.two-column-form .el-form-item {
  margin-bottom: 15px;
}

/* 表格样式 */
.el-table {
  margin-top: 20px;
}

/* 空内容区域 */
.empty-content {
  padding: 40px;
  text-align: center;
  color: #909399;
}

/* 菜单高亮样式 */
.el-menu-item.is-active {
  background-color: #e9f2ff !important;
  border-left: 3px solid #409eff;
  color: #409eff;
}

/* 按钮样式 */
.el-button {
  transition: all 0.2s;
}

.el-button:hover {
  transform: translateY(-1px);
}
</style>